<template>
<div style="display: flex;position: relative;width: 100%;height: 100%;top: 0;left: 0;">
  <div style="border-top: 1px solid #7fc4d3;;width: 200px;border-right: 1px solid #f7f7f7;position: relative;">
    <div style="background-color: #41a1b7;font-size: 12px;padding: 8px 10px;color: #ffffff;">组<i
      style="font-size: 16px;position: absolute;right: 10px;cursor: pointer;top: 4px;"
      class="iconfont icon-caidan" @click="showMenu" ></i></div>
    <input v-if="startAddGroup" v-focus @keydown.13="addGroup($event)" placeholder="请输入群组名称..." />

    <template v-for="(group,index) of groups">
      <div class="group" :class="selectedIndex == index?'active':''" @click="manager(group,index)">{{group.name}}</div>
    </template>
  </div>
  <div style="width: calc(100% - 200px);position: relative;" v-if="selectedGroup != null">
    <div style="padding: 20px;" v-if="supports.length > 0">
      <div>
        <span style="margin-right: 8px;">{{selectedGroup.name}}</span><button class="btn btn-info btn-mini" style="font-size: 12px;padding: 4px;" @click="addSupport=true">新增客服</button>
      </div>
      <div style="margin-top: 10px;">
        <table width="100%" >
          <tr>
            <th width="80px">#</th>
            <th>用户名</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
          <tr v-for="(support,index) in supports">
            <td>{{index+1}}</td>
            <td>{{support.userName}}</td>
            <td>{{new Date(support.createTime).format('yyyy-MM-dd hh:mm:ss')}}</td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>
    <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" v-if="addSupport">
      <div style="position: relative;width: 100%;height: 100%;">
        <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" :style="{opacity:supports.length == 0?1:0.5,background:supports.length == 0?'#ffffff':'#000000'}" @click="closeAddSupport"></div>
        <div style="left: 50%;position: absolute;background: white;margin-left: -228px;margin-top: 100px;">
          <AddSupport :group="selectedGroup" v-on:addSupportSuccess="addSupportSuccess"></AddSupport>
        </div>
      </div>
    </div>
  </div>

  <div @blur="hideMenu" tabindex="0" v-if="!hiddenMenu" v-focus
       style="position: absolute;outline:none;top: 35px;left: 99px;background-color: #41a1b7;padding: 0 8px;line-height: 22px;width: 100px;font-size: 12px;color: white;">
    <div @click="startAddGroup = true" style="cursor: pointer;padding: 4px 0;">新增组</div>
    <!--<div style="cursor: pointer;padding: 4px 0;border-top: 1px solid rgb(127, 196, 211)">新增组</div>-->
  </div>
</div>
</template>

<script>
  import AddSupport from './AddSupport'
  export default {
    name: 'structure',
    components: { AddSupport },
    data () {
      return {
        hiddenMenu:true,
        startAddGroup:false,
        groups:[],
        selectedIndex:0,
        selectedGroup:null,
        addSupport:false,
        supports:[]
      }
    },directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    },
    methods: {
      addSupportSuccess:function (user) {
        this.supports.push(user);
        this.addSupport = false;
      },
      closeAddSupport:function () {
        if(this.supports.length > 0)this.addSupport = false;
      },
      addGroup:function ($event) {
        const that = this;
        $.post('group/create',{groupName:$event.target.value},function (result) {
          that.groups.unshift(result);
          that.selectedGroup = result;
          that.selectedIndex = 0;
          that.addSupport = false;
          that.startAddGroup = false;
        });
      },
      showMenu:function () {
        this.hiddenMenu = false;
      },
      hideMenu:function () {
        this.hiddenMenu = true;
      },
      manager:function (group,index) {
        this.selectedIndex = index;
        this.selectedGroup = group;
      }
    },
    watch:{
      selectedGroup:function (selectedGroup) {
        this.addSupport = false;
        const that = this;
        $.post('/group/user/list',{groupId:selectedGroup.id},function (result) {
          if(result instanceof Array){
            that.supports = result;
          }
        });
      },
      supports:function (supports) {
        if(supports.length == 0)this.addSupport = true;
      }
    },
    mounted(){
      const that = this;
      $.post('/group/list',{},function (result) {
        if(result instanceof Array){
          that.groups = result;
          if(that.groups.length > 0){
            that.selectedGroup = that.groups[0];
            that.selectedIndex = 0;
          }
        }
      });
    },
  }
</script>


<style scoped>
  .group{
    padding:8px;
    border-bottom: 1px solid #f3f3f3;
    word-break: break-all;
    font-size:14px;
    color: #666;
  }
  .group.active{
    background: #f7f7f7;
  }
  input{
    width: 100%;border: none;outline: none;font-size: 14px;padding: 8px;border-bottom: 1px solid #f3f3f3;
  }
  input:focus{
    box-shadow:rgba(65, 161, 183, 0.5) 0px 0 12px 0px;
  }
  table td,table th{
    border:1px solid #f3f3f3;
    padding:4px;
  }
</style>
